<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1 >这是h1的内容</h1>
<h1>这是h1的内容</h1>


<!--按钮绑定 点击事件-->
<button onclick="setColor()">设置颜色为红色！</button>

<script !src="">
    function setColor(){
        var h1 = document.getElementsByTagName("h1")

        // 给h1对象添加一个属性对象(节点)
        var style = document.createAttribute("style")
        // style对象需要给属性值
        style.value = "color:red"
        // 将设置好属性值的属性对象（节点）放置到属性节点列表
        h1[0].setAttributeNode(style)

        // 给h2对象添加一个属性对象(节点)
        var style2 = document.createAttribute("style")
        // style对象需要给属性值
        style2.value = "color:blue"
        // 将设置好属性值的属性对象（节点）放置到属性节点列表
        h1[1].setAttributeNode(style2)


        // var h1 = document.getElementsByTagName("h1")
        // // 第一个参数。表示属性名，setAttribute就会按照指定的名字创建对象
        // // 第二个参数： 表述属性值
        // h1[0].setAttribute("style","color:red")
        // h1[1].setAttribute("style","color:blue")



        // /*完成对h1颜色的设置*/
        // var h1 = document.getElementsByTagName("h1")
        // console.log(h1)
        // h1[0].style.color = "red"
        // h1[1].style.color = "red"
        // /*对第二个h1内容的改变*/
        // h1[1].innerText = "这是修改后的内容！"

    }

</script>


</body>
</html>